<template>
  <div class="container">
    <DocHeader :title="data.title" :diagnosis="true" />
    <div class="content">
      <!--  -->
      <div class="mb5">尊敬的病员(或家属)：</div>
      <div class="mb20">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span><el-checkbox value=""></el-checkbox></span>
        您(
        <span><el-checkbox value=""></el-checkbox></span>
        您的家属)入院后，医护人员依据【住院患者风险评估表】进行了全面评估，确认存在以下风险，特给予告知，我们将尽全力做好护理防范工作。
      </div>
      <!--  -->
      <div class="ml20 mb20">
        <div class="mb5">
          防压疮告知：我已知晓患者
          <el-checkbox value=""></el-checkbox>存在压力性溃疡的风险
          <el-checkbox value=""></el-checkbox>入院时带入
          <el-checkbox value=""></el-checkbox>发生压力性溃疡
        </div>
        <div class="flex ml20">
          <div class="flex-1">告知科室：</div>
          <div class="flex-1">患者或家属签名：</div>
          <div class="flex-1">告知护士：</div>
          <div class="flex-1">告知日期：</div>
        </div>
      </div>
      <!--  -->
      <div class="ml20 mb20">
        <div class="mb5">
          防跌倒告知：我已知晓患者存在易跌倒风险并已收到有关防跌倒的宣教资料
        </div>
        <div class="flex ml20">
          <div class="flex-1">告知科室：</div>
          <div class="flex-1">患者或家属签名：</div>
          <div class="flex-1">告知护士：</div>
          <div class="flex-1">告知日期：</div>
        </div>
      </div>
      <!--  -->
      <div class="ml20 mb20">
        <div class="mb5">
          防坠床告知：我已知晓患者存在易坠床风险并已被提醒配合做好防范
        </div>
        <div class="flex ml20">
          <div class="flex-1">告知科室：</div>
          <div class="flex-1">患者或家属签名：</div>
          <div class="flex-1">告知护士：</div>
          <div class="flex-1">告知日期：</div>
        </div>
      </div>
      <!--  -->
      <div class="ml20 mb20">
        <div class="mb5">
          防导管脱落告知：我已知晓患者存在导管脱落的风险并已被提醒配合做好防范
        </div>
        <div class="flex ml20">
          <div class="flex-1">告知科室：</div>
          <div class="flex-1">患者或家属签名：</div>
          <div class="flex-1">告知护士：</div>
          <div class="flex-1">告知日期：</div>
        </div>
      </div>
      <!--  -->
      <div class="ml20 mb20">
        <div class="mb5">
          约束器具使用告知：我已知晓约束器具使用的目的，同意实施约束
        </div>
        <div class="flex ml20">
          <div class="flex-1">告知科室：</div>
          <div class="flex-1">患者或家属签名：</div>
          <div class="flex-1">告知护士：</div>
          <div class="flex-1">告知日期：</div>
        </div>
      </div>
      <!--  -->
      <div class="ml20 mb20">
        <div class="mb5 flex">
          <div class="borb" style="width: 70px"></div>
          告知：我已知晓
          <div class="borb" style="width: 200px"></div>
          ，同意实施约束
        </div>
        <div class="flex ml20">
          <div class="flex-1">告知科室：</div>
          <div class="flex-1">患者或家属签名：</div>
          <div class="flex-1">告知护士：</div>
          <div class="flex-1">告知日期：</div>
        </div>
      </div>
      <!--  -->
      <div class="ml20 mb20">
        <div class="mb5 flex">
          <div class="borb" style="width: 70px"></div>
          告知：我已知晓
          <div class="borb" style="width: 200px"></div>
          ，同意实施约束
        </div>
        <div class="flex ml20">
          <div class="flex-1">告知科室：</div>
          <div class="flex-1">患者或家属签名：</div>
          <div class="flex-1">告知护士：</div>
          <div class="flex-1">告知日期：</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { cloneDeep } from 'lodash-unified'
import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'

import { formatTime } from '@/utils/format'

import DocHeader from '../DocHeader.vue'

export default defineComponent({
  components: {
    DocHeader
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  setup(props) {
    const state = reactive({})

    function initData() {}

    watch(
      () => props.data,
      () => {
        initData()
      }
    )

    onMounted(() => {
      initData()
    })

    return {
      ...toRefs(state),
      formatTime
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
$border: 1px solid #000;

::v-deep .el-checkbox {
  margin: 0 5px !important;
}

.container {
  padding-top: getpx(50);
  margin: getpx(30) auto 0;
  width: calc(100% - 100px);
  font-family: SiYuanSong-Medium;
  text-align: start;

  .content {
    margin-top: 20px;
  }
}

.flex {
  display: flex;
}

.tac {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sta {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flex {
  @for $i from 1 through 30 {
    &-#{$i} {
      flex: $i;
    }
  }
}

.mb5 {
  margin-bottom: 5px;
}

.mb20 {
  margin-bottom: 20px;
}

.ml20 {
  margin-left: 20px;
}

.borr {
  border-right: 1px solid #000;
}

.bort {
  border-top: 1px solid #000;
}

.borl {
  border-left: 1px solid #000;
}

.borb {
  border-bottom: 1px solid #000;
}

.pad10 {
  padding: 10px;
}
</style>
